import styled from "styled-components";

export const HeaderWrapper = styled.div`
  display: flex;
  height: 41px;
  line-height: 41px;
  background: url(${require("@/assets/img/playpanel_bg.png")}) 0 0;
`

export const HeaderLeft = styled.div`
  width: 553px;
  display: flex;
  justify-content: space-between;
  padding: 0 25px;

  h3 {
    color: #e2e2e2;
    font-weight: 700;
  }

  .operator {

    button {
      color: #ccc;
      background-color: transparent;
    }

    .icon {
      width: 16px;
      height: 16px;
      display: inline-block;
      position: relative;
      top: 4px;
      right: 4px;
    }
    .favor {
      background-position: -24px 0;
    }
    .remove {
      background-position: -48px 0;
    }

    button:hover {
      color: #fff;
      .favor {
        background-position: -24px -20px;
      }
      .remove {
        background-position: -48px -20px;
      }
    }
  }
`

export const HeaderRight = styled.div`
  flex: 1;
  text-align: center;
  color: #fff;
  font-size: 14px;
  position: relative;
  
  .close {
    background-position: -195px 0;
    width: 30px;
    height: 12px;
    position: absolute;
    right: 10px;
    top: 15px;
    cursor: pointer;

    &:hover {
      background-position: -195px -30px;
    }
  }
`

